<template>
	<view class="content">
		<view class="bj1">
			<span class="sj">{{time1}}</span>
			<navigator url="classification">
			<view class="fl"><image src="../../static/img/fenlei1.png" style="width: 27px;height: 27px;"></image></view>
			</navigator>
			<navigator url="quanjuss">
				<view class="ss"><image src="../../static/img/sousuo.png" style="width: 25px;height: 25px;"></image></view>
			</navigator>
			<view class="jh">
				<view style="width: 80px; height: 50px;margin-left: 25px;margin-top: 15px;display: inline-block">
					<span style="color: #FFFFFF;font-size: 14px;">干垃圾</span>
					<br>
					<span style="color: #FFFFFF;font-size: 13px;">7:30-8:30</span>
				</view>
				<view style="width: 80px; height: 50px;margin-left: 140px;margin-top: 15px;display: inline-block">
					<!-- <view style="width: 20px; height: 20px;display: inline-block"> -->
						<span style="color: #FFFFFF;font-size: 14px;background-color: #FE5E75;">晚上</span>
					<!-- </view> -->
					
					<span style="color: #FFFFFF;font-size: 14px;">湿垃圾</span>
					<br>
					<span style="color: #FFFFFF;font-size: 13px;">7:30-8:30</span>
				</view>
			</view>
			<view class="lunb">
				<swiper autoplay style="margin-bottom:30px;">
					<swiper-item>
						<image src="../../static/indeimg/lunbo1.png" style="width:100%; height:120px;"></image>
					</swiper-item>
					<swiper-item>
						<image src="../../static/indeimg/lunbo2.png" style="width:100%; height:120px;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="sygn">
			<u-grid
			:border="false"
			col="4"
			>
			<u-grid-item
			v-for="(listItem,listIndex) in list"
			:key="listIndex"
			>
			<navigator :url="listItem.url">
				<u-icon
				:customStyle="{paddingTop:20+'rpx'}"
				:name="listItem.name"
				:size="30"
				style="margin-left: 10px;"
				></u-icon>
				<text class="grid-text" style="font-size: 10px;margin-top: 5px;">{{listItem.title}}</text>
			</navigator>
			</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;margin-top: 135px;"></view>
		<view class="xsqg">
			<view class="xs">
				<view style="width: 4px;height: 17px;background-color: #2BCDDD;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>限时兑换</b></span>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><u-count-down :time="time *1000" format="HH:mm:ss" style="margin-left: 110px;margin-top: -20px;"></u-count-down></span>
				<span @click="gotoxsquan" style="margin-left: 12px;font-size: 14px;color: #CCCCCC;margin-left: 320px;position: absolute;top: 390px;"><b>更多</b></span>
			</view>
			<view class="lb">
			<u-scroll-list @right="right" @left="left" :indicator="indicator">
			    <view class="scroll-list" style="flex-direction: row;">
			        <view
			                class="scroll-list__goods-item"
			                v-for="(item, index) in xsdh"
			                :key="index"
			                :class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']"
			        >
			            <image @click="gotospxq(item.commodityId)" class="scroll-list__goods-item__image" :src="item.commodityimgs[0].pash"></image>
			            <text class="scroll-list__goods-item__text">￥{{ item.price }}</text>
			        </view>
			        <view class="scroll-list__show-more">
			            <text class="scroll-list__show-more__text">查看更多</text>
			            <u-icon name="arrow-leftward" color="#f56c6c" size="12"></u-icon>
			        </view>
			    </view>
			</u-scroll-list>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;margin-top: -13px;"></view>
		<view style="width: 100%;height: 100%;">
			<view class="xs">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 20px;margin-top: 3px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>热门讨论</b></span>
				<span @click="gototlquan" style="font-size: 14px;color: #CCCCCC;margin-left: 230px;"><b>更多</b></span>
				<view style="width: 100%;height: 100%;">
					<uni-card>
						<span style="color: #333333;font-size: 15px;"><b>奶茶究竟应该怎么扔？</b></span>
						<view style="width: 36px;height: 20px;background-color: #FE5E75;border-radius: 15px;display: inline-block">
							<span style="color: #FFFFFF;margin-left: 2px;">吐槽</span>
						</view>
						<br>
						<span style="font-size: 13px;">RT，一杯珍珠奶茶有珍珠有杯子有奶茶还有吸管，应该怎么分类才对？</span>
					</uni-card>
					<uni-card v-for="(item,index) in discusses" @click="gototl(item.discussId)">
						<span style="color: #333333;font-size: 15px;"><b>{{item.title}}</b></span>
						<view style="width: 36px;height: 20px;background-color: #FE5E75;border-radius: 15px;display: inline-block">
							<span style="color: #FFFFFF;margin-left: 2px;">热门</span>
						</view>
						<br>
						<span style="font-size: 13px;">{{item.contents}}</span>
					</uni-card>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var timers;
	export default {
		data() {
			return {
				discusses:[],
				xsdh:[],
				indicator: false,
				time:'',
				time1:'',
				list: [{
						name: '../../static/img/rili.png',
						title: '投放日历',
						url:'../../pages/index/toufangrili',
						},
						{
							name: '../../static/img/bgmoney.png',
							title: '上门回收',
							url:'../../pages/zc/nearby',
						},
						{
							name: '../../static/indeimg/ar.png',
							title: '垃圾识别',
							url:'',
						},
						{
							name: '../../static/img/dkqd.png',
							title: '每日签到',
							url:'../../pages/index/qiandao',
						},

					],
				list1: [{
					price: '230.5',
				    thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}, {
					price: '74.1',
				    thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '8457',
				    thumb: 'https://cdn.uviewui.com/uview/goods/6.jpg'
				}, {
					price: '1442',
				    thumb: 'https://cdn.uviewui.com/uview/goods/5.jpg'
				}, {
					price: '541',
				    thumb: 'https://cdn.uviewui.com/uview/goods/2.jpg'
				}, {
					price: '234',
				    thumb: 'https://cdn.uviewui.com/uview/goods/3.jpg'
				}, {
					price: '562',
				    thumb: 'https://cdn.uviewui.com/uview/goods/4.jpg'
				}, {
					price: '251.5',
				    thumb: 'https://cdn.uviewui.com/uview/goods/1.jpg'
				}]
			}
		},
		onLoad() {
			this.fn()
			this.initindex()
		},
		onShow() {
			// timers = setInterval(() => {
			// 		this.timefun();
			// 		// console.log("倒计时");
			// 	}, 1000);
		},
		methods: {
			gotospxq(commodityid){
				uni.navigateTo({
					url:'../shangcheng/spxq?commodityid='+commodityid
				})
			},
			gotoxsquan(){
				uni.navigateTo({
					url:'../shangcheng/xsdh'
				})
			},
			gototlquan(){
				uni.navigateTo({
					url:'./tlquan'
				})
			},
			gototl(id){
				uni.navigateTo({
					url:'./tlxq?id='+id
				})
			},
			initindex(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getindex',
					method: 'GET',
				   data: {
					   // keyword: this.keyword,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(result)
						// this.c=res.data.data.unionmap.c
						// this.commodities=res.data.data.unionmap.commodities
						this.discusses=res.data.data.map.discusses
						
						this.xsdh=res.data.data.map.xsdh
						
						this.time=this.xsdh[0].time
						console.log(this.time)
						// this.bsid=1
						// console.log(this.c)
						
							
					},
				})	
			},
			fn () {
			      var timeObj = new Date()
			      var year = timeObj.getFullYear()
			      var mon = timeObj.getMonth() + 1
			      var day = timeObj.getDate()
			      var h = timeObj.getHours()
			      var m = timeObj.getMinutes()
			      var s = timeObj.getSeconds()
			      var week = timeObj.getDay()
			      switch (week) {
			        case 0: week = '日'
			          break
			        case 1: week = '一'
			          break
			        case 2: week = '二'
			          break
			        case 3: week = '三'
			          break
			        case 4: week = '四'
			          break
			        case 5: week = '五'
			          break
			        case 6: week = '六'
			          break
			      }
			      this.time1 = ' 星期' + week
			    },
			totwo (n) {
			      if (n <= 9) {
			        n = '0' + n
			        return n
			      } else {
			        n = '' + n
			        return n
			      }
			    },
		}
	}
</script>

<style lang="scss">
	.lb{
		width: 340px;
		height: 90px;
		margin-left: 18px;
		background-color: #FFFFFF;
		margin-top: -10px;
	}
	.xs{
		width: 100%;
		height: 25px;
		background-color: #FFFFFF;
		padding: 5px;
		display: inline-block
	}
	.xsqg{
		width: 100%;
		height: 178px;
		// background-color: #007AFF;
		
	}
	.sygn{
		width: 335px;
		height: 70px;
		/* background-color: #F3A73F; */
		border-radius: 10px;
		position: absolute;
		top: 295px;
		left: 20px;
	}
	.lunb{
		width: 335px;
		height: 120px;
		background-color: #F3A73F;
		border-radius: 10px;
		position: absolute;
		top: 170px;
		left: 20px;
	}
	.jh{
		width: 335px;
		height: 75px;
		background-color: #FFFFFF;
		border-radius: 10px;
		position: absolute;
		top: 70px;
		left: 20px;
		/* opacity: 0.6; */
		background-color: rgba(255, 255, 255, 0.5);
	}
	.ss{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 330px;
		position: absolute;
		top: 22px;
		
	}
	.fl{
		width: 25px;
		height: 25px;
		/* background-image: url(../../static/img/fenlei.png); */
		/* background-color: #000000; */
		margin-left: 280px;
		position: absolute;
		top: 20px;
		
	}
	.sj{
		font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
		    font-weight: 700;
		    font-size: 20px;
		    color: #FFFFFF;
		    margin-left: 15px;
			position: absolute;
			top: 20px;
	}

	.bj1{
		width:100%;
		height:468rpx;
		background-image: url(../../static/indeimg/xia.png);
		
	}
	.scroll-list {
		@include flex(column);
	
		&__goods-item {
			margin-right: 20px;
	
			&__image {
				width: 85px;
				height: 85px;
				border-radius: 10px;
			}
	
			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}
	
		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;
	
			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}
	}
</style>
